<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>document事件 - JavaScript</title>

    <script>
        window.onload = function () {
            console.log(document.getElementById("img-load"));
            console.log("加载完毕");
        }
    </script>

</head>
<body>
    <h1>document事件</h1>
    <h4>学习目标</h4>
    <ol id="learning-target">
        <li>熟悉document常用事件</li>
        <li>了解查手册的方法</li>
    </ol>

    <!--<button>按钮</button>-->
    <!--<input type="text" name="real-name" />-->

    <form id="test-form" action="http://localhost:8888/user.php" style="display: block;">
        姓名: <input type="text" id="name" name="name" /><br />
        性别: <input type="radio" name="sex" value="1" />男
        <input type="radio" name="sex" value="2" />女
        <input type="radio" name="sex" value="3" />保密<br />
        <input type="button" id="normal-btn" value="我只是一个普通按钮" />
        <input type="submit" id="submit-btn" value="提交" />
        <input type="reset" id="reset-btn" value="重置" />

        <br />
        封面图片:<input type="file" id="cover-img" name="cover-img" />
        <br />
        新闻简介
        <br />
        <textarea name="content" cols="40" rows="10"></textarea>
        <br />
        是否定时发布:
        <input type="radio" name="is" value="1" />是
        <input type="radio" name="is" value="0" />否
        <br />
        发布时间:
        <input type="text" name="publish-time" />
        <br />
        关键词:
        <input type="text" name="keyword" />
        <br />
        内容文本框
        <br />
        <textarea name="content" cols="80" rows="10"></textarea>
        <br />
        <input type="submit" value="保存" />
        <input type="reset" value="重置" />

    </form>

    <img id="img-load" src="https://upload.wikimedia.org/wikipedia/commons/4/41/Apple-wireless-keyboard.jpg?download" width="500">



    <script type="text/javascript">
        // --------------------------------------------------------------------
        // -- 事件（event）
        // --------------------------------------------------------------------
        /*
            HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

            使用语法:
                在标签里直接增加事件
                HTMLElement.事件类型 = 匿名函数 // 设置事件监听器
                HTMLElement.addEventListener() // 增加事件监听器
        */


        // -----------------------------
        // -- 前奏
        // -----------------------------
        // 先设计一个表单, 内容为:
        //      表单id: test-form, target为_blank, action为http://localhost:8888/user.php
        //      有姓名输入框, id为name
        //      有普通按钮, id为normal-btn
        //      有提交按钮, id为submit-btn
        //      有重置按钮, id为reset-btn
        // 做一个user.php文件, 了解一下php文件如何接收提交的参数

        //var_dump($_REQUEST);http是当前路径,localhost:8888是比如nginx-1.18.0中html这个文件夹

        // -----------------------------
        // 1. 表单事件
        // -----------------------------
        /*
            常用事件:
                onfocus 	元素获取焦点时触发
                onblur 	    元素失去焦点时触发
                onchange 	该事件在表单元素的内容改变时触发( <input>, <select>, 和 <textarea>)
                onsubmit 	表单提交时触发
                onreset 	表单重置时触发
         */
        // 1.1 获取id为name的文本框, 测试获取焦点、失去焦点和内容改变事件
        
        // document.getElementById("name").onfocus = function () {
        //     console.log("元素:姓名--获得焦点");
        // };
        // document.getElementById("name").onblur = function () {
        //     console.log("元素:姓名--失去焦点");
        // };
        // document.getElementById("name").onchange = function () {
        //     console.log("元素:姓名--改变内容");
        // };
        
        // 1.2 获取id为test-form的表单, 当表单提交时, 检测各个表单项是否都填写,
        //      都填写了就可以提交, 否则提示: 请填写表单内容

        // document.getElementById("test-form").onsubmit = function () {
        //     console.log("表单提交");
        //     //判断姓名是否有填写
        //     if (document.getElementById("name").value.length === 0) {
        //         console.log("姓名为空");
        //         return false;
        //     }
        //
        //     //判断性别是否有选择
        //     let sexValue;
        //     let sexList = document.getElementsByName("sex");
        //     for (let item of sexList){
        //         if (item.checked){
        //             sexValue = item.value;
        //         }
        //     }
        //     if (!sexValue){
        //         console.log("请选择性别");
        //         return false;
        //     }
        //
        //     // return false;
        //     return true;
        // };

        // 1.3 获取id为test-form的表单, 当表单重置的时候,提示是否重置表单, 确认则重置, 取消则不重置

        document.getElementById("test-form").onreset = function () {
            return window.confirm("是否重置表单"); //confirm就是返回true false;
        };

        // -----------------------------
        // 2. 鼠标事件
        // -----------------------------
        /*
             常用事件:
                 onclick 	当用户点击某个对象时调用的事件句柄
                 ondblclick 	当用户双击某个对象时调用的事件句柄
                 onmouseout 	鼠标从某元素移开
                 onmouseover 鼠标移到某元素之上
         */
        // 2.1 获取id为normal-btn的按钮, 测试鼠标单击和鼠标双击事件

        document.getElementById("normal-btn").onclick = function () {
            console.log("普通按钮被单击");
        };
        document.getElementById("normal-btn").ondblclick = function () {
            console.log("普通按钮被双击");
        };

        // 2.2 获取id为normal-btn的按钮, 当鼠标悬浮的时候鼠标指针切换为手型, 并且显示阴影效果
        //      阴影效果使用css3样式: box-shadow
        //      鼠标离开后, 恢复原样

        document.getElementById("normal-btn").onmouseover = function () {
            this.style.cursor = "pointer";
            this.style.boxShadow = "2px 2px 2px blue";
        };
        document.getElementById("normal-btn").onmouseleave = function () {
            this.style.boxShadow = "none";
        };

        // -----------------------------
        // 3. 键盘事件
        // -----------------------------
        /*
             常用事件:
                 onkeydown 	某个键盘按键被按下
                 onkeypress 	某个键盘按键被按下并松开
                 onkeyup 	某个键盘按键被松开
         */
        // 3.1 设置一个文本框, 捕获其 onkeydown 、onkeypress 和 onkeyup 事件, 并打印出按了哪个键
        //      获取按了哪个键使用key, 而不是keyCode(不推荐,弃用)--数字输出

        document.getElementById("name").onkeydown = function () {
            console.log("onkeydown");
        };
        document.getElementById("name").onkeypress = function () {
            console.log("onkeypress");
        };
        document.getElementById("name").onkeyup = function () {
            console.log("onkeyup");
        };

        // -----------------------------
        // 4. 框架/对象事件
        // -----------------------------
        /*
            常用事件:
                onload 	一张页面或一幅图像完成加载
         */
        // 4.1 使用img标签, 载入一张图片, 在图片载入完成后, 触发onload事件
        //      图片地址: https://upload.wikimedia.org/wikipedia/commons/4/41/Apple-wireless-keyboard.jpg?download

        document.getElementById("img-load").onload = function () {
            console.log("document.onload加载完毕");
        }

        // 4.2 将上例的代码移动到head标签内, 运行看看效果

        //不推荐,document放前面先跑的会null值,
        // 要用全局window.load,或者放后面的script

        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 设计一个内容管理系统的添加内容表单, 进行表单验证 相关内容如下:
        //      内容标题文本框: 限制30个字
        //      新闻分类: 有父类和子类, 下拉框选择, 参考网易新闻
        //      新闻内容: 多行文本框输入, 限制2000个字
        //      新闻封面图片: 图片上传
        //      新闻简介: 多行文本框输入, 限制100个字
        //      是否定时发布: 单选按钮, 是和否两个选项
        //      定时发布时间: 单行文本框, 时间字符串, 格式 年-月-日 小时:分钟:秒
        //      标签: 单行文本框, 多个标签用英文逗号分隔

        document.getElementById("news-form").onsubmit = function () {
            // if (document.getElementById("cover-img").value.length === 0){
            //     console.log("图片没有选择");
            //     return false;
            // }
            // if (document.getElementById("intro").value.length > 100){
            //     console.log("简介大于100个字");
            //     return false;
            // }

            let time = document.getElementById("publish-time").value;
            console.log(time);
            if (new Date(time).toString() === "Invalid Date"){
                console.log("请输入正确的时间格式");
                return false;
            }

            return false;

        }

        // 2. 参考: https://demo.eleadmin.com/system/user, 实现复选框多选的效果。

    </script>
</body>
</html>